<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
    <style type="text/css">
    	*{
    		padding: 0;
    		margin: 0;
    	}
		#box{
			width: 730px;
			height: 454px;
			position: relative;
			margin-top: 150px;
			margin-left: 300px;
			margin-bottom: 300px;
			overflow: hidden;
		}
		#box .lunbo{
			height: 454px;
			width: 4380px;
			position: relative;
		}
		#box ul{
			position: absolute;
			bottom: 10px;
			left: 302px;
		}
		#box ul li{
			width: 20px;
			height: 20px;
			background-color: #000;
			color: #FFF;
			border-radius: 50%;
			float: left;
			list-style: none;
			text-align: center;
			margin-right: 5px;
			cursor: pointer;
		}
		#box img{
			position: absolute;
			top: 0;
			left: 0;
		}
		#box .left{
			width: 28px;
			height: 62px;
			opacity: 0.4;
			filter: alpha(opacity=40);
			position: absolute;
			top: 190px;
			left: 0px;
			background-image: url(images/left.png);
			display: none;
		}
		#box .right{
			width: 28px;
			height: 62px;
			opacity: 0.4;
			filter: alpha(opacity=40);
			position: absolute;
			top: 190px;
			right: 0px;
			background-image: url(images/right.png);
			display: none;
		}
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
    <script type="text/javascript">
  		$(function(){
  			var c =0;
  			var timer;
  			var outTimer;
  			var sta =1;
  			function _show(){
  				c = (c==6)?0:c;
  				c = (c==-1)?5:c;
  				$('#box').find('img').eq(c).stop().fadeIn('300','linear',function(){
  					sta =1;
  				}).siblings('img').fadeOut('300','linear');
  				$('#box').find('ul').find('li').eq(c).css("background-color","#B61B1F").siblings('li').css("backgroundColor","#000");
  			}
  			function run(){
  				c++;
  				_show();
  			}
  			$('#box').find('ul').find('li').hover(function() {
  				var outThis = $(this);
  				outTimer = setTimeout(function(){
					c = outThis.index();
  					_show();
  				},200)
  			}, function() {
  				clearTimeout(outTimer);
  			});
  			$('#box').mouseenter(function() {
  				clearInterval(timer);
  				$(this).find('.left').show();
  				$(this).find('.right').show();
  			});
  			$('#box').mouseleave(function() {
  				timer = setInterval(run,3000);
  				$(this).find('.left').hide();
  				$(this).find('.right').hide();
  			});
  			$(this).find('.left').click(function() {
  				if(sta){
  					sta =0;
  					c--;
  					_show();
  				}
  				

  			});
  			$(this).find('.right').click(function() {
  				if(sta){
  					sta =0;
  					c++;
  					_show();
  				}
  			});
  			timer = setInterval(run,3000);
  		})
    </script>
    <title>新页面</title>
  </head>

 <body>
	<div id="box">
			<img src="images/1.jpg" alt="" style="display:block" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
			<img src="images/5.jpg" alt="" />
			<img src="images/6.jpg" alt="" />
		<ul>
			<li style="background-color:#B61B1F">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<div class="left"></div>
		<div class="right"></div>
	</div>
 </body>
</html>